<template>
  <div class="cardlist">
    <van-tabs v-model="active">
      <van-tab title="储值卡" name="cashcards" />
      <van-tab title="提货卡" name="pickupcards" />
    </van-tabs>
    <van-grid :gutter="10" :column-num="2" :center="false">
      <van-grid-item v-for="item in cardlist" :key="item.id">
        <van-image fit="cover" :src="item.image" />
        <div class="item">
          <h4>{{ item.title }}</h4>
          <span>¥{{ item.price }}</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      active: "cashcards",
      cardlist: [],
    };
  },
  computed: {
    ...mapState(["cashcardList", "pickupcardList"]),
  },
  methods: {
    ...mapMutations(["saveList"]),
    toDetail(id) {
      this.$router.push("/goodsdetail/" + id);
    },
    getCardlist(type) {
      let url = `/shop/cardlist?type=${
        type == "cashcardList" ? "cashcards" : "pickupcards"
      }`;
      this.axios
        .get(url)
        .then((res) => {
          console.log(res);
          this.cardlist = res.data.results;
          this.saveList({ type, list: this.cardlist });
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  mounted() {
    if (this.cashcardList.length == 0) {
      this.getGoodslist("cashcardList");
    } else {
      this.goodslist = this.cashcardList;
    }
    if (this.pickupcardList.length == 0) {
      this.getGoodslist("pickupcardList");
    } else {
      this.goodslist = this.pickupcardList;
    }
  },
  watch: {
    active() {
      if (this.active == "cashcardList") {
        this.cardlist = this.cashcardList;
      } else {
        this.cardlist = this.pickupcardList;
      }
    },
  },
};
</script>

<style scoped>
.item > span {
  color: #e4004f;
}
</style>
